import React, { ChangeEvent, useEffect, useState } from "react";
import { Button, Container, Image } from "react-bootstrap";
import { UserHelper } from "../../../helper";
import { PopupDialog } from "../../../components/common";
import fileservice from "../../../services/fileservice";
import { toast } from "react-toastify";
import UserService from "../../../services/userservice";

interface ProfileProps{

}

const Profile:React.FC<ProfileProps> = (props:ProfileProps)=> {

    var userInfo = UserHelper.getCachedUserInfo();
    var selectedFile:any = null;
    const [avatarUrl,setAvatarUrl] = useState<string>();
    useEffect(()=>{
        console.debug(JSON.stringify(userInfo));
    },[])


    const changeHeaderImage = ()=> {
        PopupDialog.showUploadImage("Please select image",(event:ChangeEvent<HTMLInputElement>)=>{
            if(event.target.files){
                console.debug('selected a file')
                var file = event.target.files[0] as File;
                selectedFile = file;
                console.debug('set selected file')
            }else{
                console.debug('callback onchange of input but not a selected file')
            }
        },(clearInput:any)=>{
            if(selectedFile !== undefined){
                fileservice.uploadFile(selectedFile,'image').then((res:any)=>{
                    const fileurl = (res.content||{}).fileurl||"";
                    return fileurl;
                }).then((fileurl)=>{
                    if(fileurl){
                        UserService.updateAvatar(userInfo.userid,fileurl).then(()=>{
                            setAvatarUrl(fileurl);
                            userInfo.avatar = fileurl;
                            UserHelper.updateCachedUserInfo(userInfo.username,userInfo);
                            selectedFile = null;
                            clearInput(); 
                        }).catch((err)=>{
                            PopupDialog.showBsError(err);
                        })    
                    }
                })   
            }else{
                console.debug("you do not select a file");
            }
        })
    }

    return (<Container fluid className="d-flex flex-column" style={{flex:1}}>
        <Container fluid className="d-flex flex-row">
            <Container style={{width:150,height:150}}>
                <Image 
                    width={150}
                    height={150}
                    alt="100x150"
                    src={avatarUrl||userInfo.avatar||require("../../../resources/images/headerIcon.jpeg")}
                    onClick={changeHeaderImage}
                />
            </Container>
            <Container className="d-flex flex-column ms-3 mt-2">
                <p><b>Username:</b> {userInfo.username}</p>
                <p><b>Nickname:</b> {userInfo.nickname}</p>
                <p><b>Age:</b> {userInfo.age}</p>
                <p><b>Phone:</b> {userInfo.phonenumber}</p>
            </Container>
        </Container>
        <Container fluid className="d-flex flex-column mt-5" style={{flex:1}}>
            <textarea style={{width:"100%",resize:'none',borderWidth:0.5,flex:1,borderColor:'lightgray'}}>

            </textarea>
            <Button className="d-flex align-self-end mt-5 mb-2">Save</Button>
        </Container>
    </Container>)
}

export default Profile;